import * as api from "@/api/order"
import { useEffect } from "react"
import React, { useState } from 'react';
import { Image, Table,Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { EyeOutlined,DeleteOutlined, EditOutlined,} from '@ant-design/icons';

type aa = {
    description:string,
    imageUrl:string,
    price:number,
    productName:string,
    product_id?:string,
    quantity:number
}

interface DataType {
    address:string,
    create_time:string,
    orderDetail:aa,
    order_id?:string,
    order_status?:number,
    pay_status?:number,
    shiping_status?:number
    total_fee?:number,
    unid?:string,
    user_nickname?:string,
    user_phone?:string
}

const Order = () => { 
    // 指定选中项的 key 数组，需要和 onChange 进行配合
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 表格数据
    const [dataSource,setDataSource] = useState<DataType[]>()

    const [data,setData] = useState<DataType[]>([])

    let getOrder = async () => {
        let res = await api.getOrder();
        console.log(res.data.data);
        res.data.data.map((item:any) => {
            item.key = Math.random().toString(32).substring(2)
            item.product_id = item.orderDetail[0].product_id
            item.productName = item.orderDetail[0].productName
            item.price = item.orderDetail[0].price
        })

        setDataSource(res.data.data)
    }

    useEffect(()=>{
        getOrder()
    },[])

    let columns:ColumnsType<DataType> = [
        {
            title:'产品编号',
            dataIndex:'product_id',
            align:'center'
        },
        {
            title:'产品图片',
            dataIndex:'imageUrl',
            align:'center',
            render(row) {
                // console.log(row)
                return (
                    <Image
                        // width={200}
                        src={row ? row : 'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1673110800&t=25e086e66b814c4966b8ae843e6586c6'}
                    />
                )
            }
        },
        {
            title:'产品名称',
            dataIndex:'productName',
            align:'center'
        },
        {
            title:'总价',
            dataIndex:'total_fee',
            align:'center'
        },
        {
            title:'单价',
            dataIndex:'price',
            align:'center'
        },
        {
            title:'购买用户',
            dataIndex:'user_nickname',
            align:'center'
        },
        {
            title:'创建时间',
            dataIndex:'create_time',
            align:'center',
            sorter: (a, b) => {
                let date1=new Date(Date.parse(a.create_time.replace(/-/g,"/")));//转换为Dat()
                let date2=new Date(Date.parse(b.create_time.replace(/-/g,"/")));//转换为Dat()
                return date1.getTime() - date2.getTime()
            },
        },
        {
            title:'订单状态',
            dataIndex:'order_status',
            align:'center'
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            render(row,record) {
                // console.log(row)
                return (
                    <div className="action_button">
                        <Button type="primary" icon={<EyeOutlined />} style={{ backgroundColor:'#32CD32',borderColor:'#32CD32'}} />
                        <Button type="primary" icon={<EditOutlined />}  />
                        <Button type="primary" icon={<DeleteOutlined />} danger  />
                    </div>
                )
            }

        },
    ]
  
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
      console.log('selectedRowKeys changed: ', newSelectedRowKeys);
      setSelectedRowKeys(newSelectedRowKeys);
    };
  
    const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
        <div>
          <div style={{ marginBottom: 16 }}>
            <span style={{ marginLeft: 8 }}>
              {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
            </span>
          </div>
          <Table rowSelection={rowSelection} scroll={{x:500 , y: 360,}} pagination={{position:['topLeft'],pageSize:10}}  columns={columns} dataSource={dataSource} />
        </div>
      );
}


export default Order